class VSliderExample extends egret.Sprite {

    public constructor() {
        super();

        var exml =
                `<e:Skin minWidth="20" minHeight="8" xmlns:e="http://ns.egret.com/eui">
                    <e:Image id="track" source="resource/assets/slider/track.png"  scale9Grid="1,1,4,4" width="6" height="100%" verticalCenter="0"/>
                    <e:Image id="trackHighlight" source="resource/assets/slider/tracklight.png" scale9Grid="1,1,4,4" width="6" verticalCenter="0"/>
                    <e:Image id="thumb" source="resource/assets/slider/thumb.png"/>
                </e:Skin>`

        
        var vSlider = new eui.VSlider();
        vSlider.skinName = exml
        vSlider.x = 50
        vSlider.y = 50
        vSlider.height = 100
        this.addChild(vSlider);
        vSlider.addEventListener(eui.UIEvent.CHANGE, this.changeHandler, this);
    }

    private changeHandler(evt: eui.UIEvent): void {
        console.log(evt.target.value);
    }
}